<template>
    <div class="container">
        <div class="max-w payday">
            <div class="payday_year">
                <p class="payday_year_spec">发薪年份</p>
                <div class="payday_year_select">
                    <el-date-picker v-model="data.year" type="year" :editable="false" placeholder="请选择具体的年份"
                        @change="select(data.year)" />
                </div>
                <router-link :to="{ path: '/' ,query:{key:data.key}}"><img class="payday_year_arrows"
                        src="../../assets/arrows.png" /></router-link>
            </div>
            <div class="payday_money">
                <div class="payday_money_spec">应发总额</div>
                <div class="payday_money_salary">{{ data.initials.length==0 ?'--': data.sum  }} <span>元</span></div>
            </div>
        </div>
        <div class="max-w particulars">
            <el-empty description="暂无薪资" v-if="data.initials.length==0"></el-empty>
            <div class="particulars_list" v-else  v-for="(item, index) in data.initials" :key="index"
                :style="{ height: data.cssText }" >
                <div class="particulars_list_header">
                    <p class="particulars_list_header_year">{{ item.salarymonth }} 月</p>
                    <p class="particulars_list_header_total">本月应发金额：<span>{{ item.salary }}</span></p>
                </div>
                <div class="particulars_list_title" @click.stop="triangle(index)">
                    <img class="particulars_list_title_spec" src="../../assets/money.png" />
                    <p class="particulars_list_title_name">爱丽家居科技股份有限公司</p>
                    <div>
                        <div class="triangle" v-if="!data.listShow[index]"></div>
                        <div class="triangle2" v-if="data.listShow[index]"></div>
                    </div>
                </div>
                <div class="particulars_list_detail">
                    <div class="particulars_list_detail_send">
                        <p class="particulars_list_detail_send_made">应发金额（元）</p>
                        <p class="particulars_list_detail_send_induced">实发金额（元）</p>
                    </div>
                    <div class="particulars_list_detail_should">
                        <p class="shouldSend">{{ item.salary }}</p>
                        <p class="realHair">{{ item.takehomepay }}</p>
                    </div>
                </div>
                <div class="particulars_list_item" v-show="data.listShow[index]">
                    <h6 class="title">扣款明细项</h6>
                    <div class="item-card">
                        <p class="name">社&nbsp;&nbsp;&nbsp;保：</p>
                        <p class="number">{{ item.socialsecurity }}</p>
                    </div>
                    <div class="item-card">
                        <p class="name">公积金：</p>
                        <p class="number">{{ item.housingfund }}</p>
                    </div>
                    <div class="item-card">
                        <p class="name">个&nbsp;&nbsp;&nbsp;税：</p>
                        <p class="number">{{ item.individualincometax }}</p>
                    </div>
                    <div class="item-card">
                        <p class="name">工会费：</p>
                        <p class="number">{{ item.tradeunion }}</p>
                    </div>
                    <div class="item-card">
                        <p class="name">水电费：</p>
                        <p class="number">{{ item.waterandelectricity }}</p>
                    </div>
                    <div class="item-card">
                        <p class="name">物业管理费：</p>
                        <p class="number">{{ item.propertymanagementfee }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { getSalaryInfo } from '@/api/salaryApi'
// import { ElMessage } from 'element-plus'

onMounted(() => {
    QueryString('key')
    salaryInfo()
})

const data = reactive({
    year: new Date().getMonth() + 1==1 ? new Date().getFullYear()-1 + '' : new Date().getFullYear() + '',
    initials: [],
    sum: null,
    triangle: true,
    cssText: '140px',
    listShow: [],
    key: ''
})

const select = (year) => {
    console.log(year)
    if (year !== null) {
        data.year = year.getFullYear() + ''
    }
    salaryInfo()
}
const salaryInfo = () => {
    //   console.log(data.year)
    // var year = data.monthData
    getSalaryInfo({
        key: data.key,
        salaryyear: data.year
    }).then(res => {
        console.log(res)
        data.initials = res.salarylist||[]
        res.salarylist.forEach(x => {
            if (x)
                return
            data.listShow.push(false)
        });
        data.sum = res.sum.toFixed(2)
    })
}

// 获取网址的key
const QueryString = (val) => {
    console.log(window.location)
    var uri = window.location.href;
    var re = new RegExp("[?&]" + val + "=([^&?]*)", "ig");
    data.key = decodeURIComponent ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 2)) : null)
}

const triangle = (index) => {
    console.log(index)
    if (data.triangle) {
        data.cssText = "auto"
        data.triangle = !data.triangle
        data.listShow[index] = !data.listShow[index]
    } else {
        // data.cssText = "140px"
        data.triangle = !data.triangle
        data.listShow[index] = !data.listShow[index]
    }
}
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
